/* eslint-disable */
import React, { Component } from 'react';
import Animation from '../Animation';

// 驾驶舱侧边栏滑块 滑入滑出动画容器
class SlideBlock extends Component{

  static defaultProps = {
    outClassName: 'fadeOutLeft',        // 滑出动画类名  默认左侧滑出   参考Animation组件中的类名选择
    inClassName: 'fadeInLeft',          // 划入动画类名  默认左侧划入
    className: '',                      // 样式类名
    style: {},                          // 样式
    delay: 500,                         // 针对closeToOpen模式  中间过度间隔毫秒数
    mode: 'open',                       // 动画模式  open(打开)、close(关闭)、closeToOpen(先关闭再打开)
  }

  state = {
    currentMode: '',
  }

  componentDidMount() {
    this.setCurrentMode();
  }

  componentWillReceiveProps(nProps) {
    if(this.props.mode !== nProps.mode) {
      this.setCurrentMode(nProps);
    }
  }

  setCurrentMode = (props = this.props) => {
    if(props.mode === 'closeToOpen') {
      this.setState({
        currentMode: 'close'
      }, () => {
        setTimeout(() => {
          this.setState({
            currentMode: 'open'
          })
        }, props.delay)
      })
    }else {
      this.setState({
        currentMode: props.mode
      });
    }
  }

  getAnimation = (className) => {
    if(!className) return this.props.children
    return (
      <Animation className={className}>
        { this.props.children }
      </Animation>
    )
  }

  getChildren = () => {
    const { inClassName, outClassName } = this.props;
    const { currentMode } = this.state;

    if(!currentMode) return this.getAnimation(null);
    if(currentMode === 'open') return this.getAnimation(inClassName);
    if(currentMode === 'close') return this.getAnimation(outClassName);
    if(currentMode === "closeToOpen") return this.getAnimation(outClassName);
  }

  render() {
    const { style, className } = this.props;
    return (
      <div style={style} className={className}>
        { this.getChildren() }
      </div>
    )
  }

}

export default SlideBlock